<template>
    <view class="tech-nav">
        <!-- 底部导航栏 -->
        <view class="nav-bar">
            <view 
                v-for="(item, index) in navItems" 
                :key="index"
                class="nav-item"
                :class="{ active: currentPage === item.path }"
                @tap="navTo(item.path)"
            >
                <image :src="currentPage === item.path ? item.selectedIcon : item.icon" mode="aspectFit"></image>
                <text>{{item.text}}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'tech-nav-bar',
    props: {
        title: {
            type: String,
            required: true
        },
        currentPage: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            navItems: [
                {
                    text: '工作台',
                    path: '/pages/technician/home',
                    icon: '/static/tabbar/home_tn.png',
                    selectedIcon: '/static/tabbar/home_tn.png'
                },
                {
                    text: '忙时',
                    path: '/pages/technician/time',
                    icon: '/static/tabbar/case_tn.png',
                    selectedIcon: '/static/tabbar/case_tn.png'
                },
                {
                    text: '接单',
                    path: '/pages/technician/order',
                    icon: '/static/tabbar/cate_tn.png',
                    selectedIcon: '/static/tabbar/cate_tn.png'
                },
                {
                    text: '消息',
                    path: '/pages/technician/message',
                    icon: '/static/tabbar/message.png',
                    selectedIcon: '/static/tabbar/message.png'
                },
                {
                    text: '我的',
                    path: '/pages/technician/my',
                    icon: '/static/tabbar/my_tn.png',
                    selectedIcon: '/static/tabbar/my_tn.png'
                }
            ]
        }
    },
    methods: {
        navTo(path) {
            uni.redirectTo({
                url: path
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.tech-nav {
    .page-title {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100rpx;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        z-index: 100;
    }
    
    .nav-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 160rpx;
        background: #FFFFFF;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
        z-index: 100;
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 12rpx 0 20rpx;
            margin-bottom: 10rpx;
            image {
                width: 60rpx;
                height: 60rpx;
                margin-bottom: 10rpx;
            }
            
            text {
                font-size: 30rpx;
                color: #999999;
                line-height: 1.2;
                font-weight: 500;
            }
            
            &.active {
                text {
                    color: #2B87FF;
                    font-weight: 600;
                }
            }
        }
    }
}
</style> 